<template>
  <!-- 页面容器 -->
  <div class="channelContainer">
    <!-- //顶部导航 -->
    <!-- <tab /> -->
    <!-- 轮播图 -->
    <swiper />
    <!-- 全部商品列表大容器 -->
    <div class="shopContainer">
      <!-- 商品列表 -->
      <div class="shopList" v-for="(item1, index) in channelList" :key="index">
        <!-- 商品列表标题 -->
        <div class="title1">{{ item1.category.name }}</div>
        <div class="title2">{{ item1.category.frontName }}</div>
        <!-- 每个商品 -->
        <div
          class="shopItem"
          v-for="(item2, index) in item1.itemList"
          :key="index"
        >
          <img @click="toDetail" :src="item2.listPicUrl" alt="" />
          <!-- 是否热卖 -->
          <img
            src="https://yanxuan.nosdn.127.net/cc969d51078ecc5f17c31ed260c45b39.png"
            class="hot"
          />
          <!-- 介绍 -->
          <div class="introduce">{{ item2.name }}</div>
          <!-- 价格盒子 -->
          <div class="priceContainer">
            <!-- 现价 -->
            <span class="price1"
              >到手价¥
              <span class="number">{{ item2.retailPrice }}</span>
            </span>
            <!-- 原价 -->
            <span class="price2">¥{{ item2.counterPrice }}</span>
          </div>
          <div class="discounts">满99减15元</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import swiper from "@/pages/Home/components/swiper.vue";
import { reqHomeRecommend, reqHomeOther } from "@/api";
import { mapState, mapGetters } from "vuex";
export default {
  name: "Channel",
  data() {
    return {
      categoryItemList: [], //根据id请求下来的商品数据列表
      channelId: 0, //正在访问的频道id
    };
  },
  methods: {
    // 点击图片跳转详情的回调
    toDetail() {
      this.$router.push({
        path: "/detail",
      });
    },
    async getHomeOther() {
      let id = this.$router.history.current.query.id * 1;
      let result = await reqHomeOther(id);
      this.categoryItemList = result.data.categoryItemList.splice(0, 3);
      // console.log(this.categoryItemList);
    },
  },
  mounted() {
    //拿传递过来的路由发请求
    this.getHomeOther();
  },
  computed: {
    ...mapState({
      channelList: (state) => state.channel.channelList,
    }),
  },
  components: {
    swiper,
  },
};
</script>

<style lang="less" scoped>
// 页面容器
.channelContainer {
  height: 1500px;
  // 大商品列表容器
  .shopContainer {
    // 每个商品列表
    .shopList {
      display: flex;
      flex-wrap: wrap;
      padding: 10px;
      // 商品列表标题
      .title1 {
        font-size: 16px;
        width: 340px;
        height: 20px;
        // background: rgb(124, 245, 219);
        text-align: center;
        line-height: 20px;
        margin-left: 6px;
      }
      .title2 {
        margin-left: 6px;
        font-size: 12px;
        width: 340px;
        height: 20px;
        // background: rgb(148, 238, 160);
        text-align: center;
        line-height: 20px;
      }
      // 每个商品
      .shopItem {
        font-size: 14px;
        // background: rgb(158, 232, 245);
        margin: 4px 4px 10px 0;
        position: relative;
        // 是否热卖
        .hot {
          width: 20px;
          height: 10px;
          position: absolute;
          top: 20px;
          right: 10px;
        }
        // 商品图片
        img {
          width: 173px;
          height: 173px;
          border-radius: 10px;
          margin-bottom: 6px;
        }
        // 介绍
        .introduce {
          // background: rgb(243, 137, 137);
          width: 173px;
        }
        // 价格盒子
        .priceContainer {
          height: 30px;
          // text-align: center;
          line-height: 30px;
          //现价
          .price1 {
            color: red;
            font-weight: 700;
            .number {
              font-weight: 700;
              font-size: 18px;
              color: red;
              padding-right: 2px;
            }
          }
          //原价
          .price2 {
            color: #a599a5;
            text-decoration: line-through;
          }
        }
        //优惠
        .discounts {
          width: 90px;
          background: #fa1e32;
          border-radius: 10px;
          text-align: center;
          color: #fff;
        }
      }
    }
  }
}
</style>
